<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <link rel="stylesheet"  th:href="@{/static/css/join.css}"> -->
    <!--    <script type="text/javascript" th:src="@{js/md5.js}"></script>-->
    <link rel="stylesheet" type="text/css" href="css/student.css">
    <script type="text/javascript" src="js/md5.js"></script>
    <script>
        function refresh() {
            xhttp.onreadystatechange=function (){
                if(this.readyState === 4 && this.status === 200) {
                    proQuerResponse(this.responseText);
                }
            };
            xhttp.open("GET","/students",true);
            xhttp.setRequestHeader('Accept','application/json');
            xhttp.send();
        }

        function proQuerResponse(responseText) {
            const obj=JSON.parse(responseText);
            if (obj.success){
                const talBody=document.getElementById('studentbod');
                talBody.innerHTML="";
                for(let stud of obj.data){
                    const tr=document.createElement('tr');
                    const td1=document.createElement('td');
                    td1.innerText=stud.id;
                    const td2=document.createElement('td');
                    td2.innerText=stud.name;
                    const td4=document.createElement('td');
                    td4.innerText=stud.classroom;
                    const td5=document.createElement('td');
                    td5.innerText=stud.gender;
                    const td6=document.createElement('td');

                    const messipd=document.createElement('input');
                    messipd.addEventListener('click',function () {
                        rounte48();
                        return false;
                    });
                    messipd.type='button';
                    messipd.value='48小时行踪轨迹';
                    td6.appendChild(messipd);
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td4);
                    tr.appendChild(td5);
                    tr.appendChild(td6);
                    talBody.appendChild(tr);
                }
            }
        }

        function add() {
            const id=document.getElementById('ipid');
            const name=document.getElementById('ipname');
            const password=document.getElementById('ippwd');
            const md5pwd=MD5(password.value);
            const sex=document.getElementById('ipsex');
            const classroom=document.getElementById('ipclass');
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    const obj = JSON.parse(this.responseText);
                    if (obj.success) {
                        alert("success");
                        refresh();
                    }
                }
            };
            xhttp.open("POST", "/stu/add?id=" + id.value +'&name='+name.value+ '&password=' + md5pwd + '&classroom=' + classroom.value+'&gender=' + sex.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function update(student) {
            const id=document.getElementById('ipid');
            const name=document.getElementById('ipname');
            const sex=document.getElementById('ipsex');
            const classroom=document.getElementById('ipclass');
            classroom.value=student.classroom;
            id.value=student.id;
            name.value=student.name;
            sex.value=student.gender;
        }

        function onupdate() {
            const id=document.getElementById('ipid');
            const name=document.getElementById('ipname');
            const password=document.getElementById('ippwd');
            const md5pwd=MD5(password.value);
            const sex=document.getElementById('ipsex');
            const classroom=document.getElementById('ipclass');

            xhttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    const obj = JSON.parse(this.responseText);
                    if (obj.success) {
                        alert("success");
                        refresh();
                    }
                }
            };
            xhttp.open("PUT", "/update?id=" + id.value +'&name='+name.value+ '&password=' + md5pwd + '&classroom=' + classroom.value+'&gender=' + sex.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function ondelet(student) {
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    const obj = JSON.parse(this.responseText);
                    if (obj.success) {
                        alert("success");
                        refresh();
                    }
                }
            };
            xhttp.open("POST", "/delete?id=" + student.id, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function quiery() {

            const id=document.getElementById('ipid');
            xhttp.onreadystatechange=function (){
                if(this.readyState === 4 && this.status === 200){
                    proQuerResponse(this.responseText);

                }
            };
            xhttp.open("GET","/getbyid?id="+id.value,true);
            xhttp.setRequestHeader('Accept','application/json');
            xhttp.send();
        }

        function rounte48() {
            window.location.href='route.html';

        }

        function local() {
            window.location.href='madou.html';
        }

        var xhttp=new XMLHttpRequest();
        window.onload=function () {
            refresh();
        }
    </script>
</head>

<body>
<form>

    <div>
        <label for="ipid">id号</label>
        <input id="ipid" type="text" placeholder="id号">
    </div>
    <div>
        <label for="ipname">昵称</label>
        <input id="ipname" type="text" placeholder="输入昵称">
    </div>
    <div>
        <label for="ippwd">密码</label>
        <input id="ippwd" type="text" placeholder="输入密码">
    </div>

    <div>
        <label for="ipclass">班级</label>
        <input id="ipclass" type="text" placeholder="输入班级">
    </div>

    <div>
        <label for="ipsex">性别</label>
        <input id="ipsex" type="text" placeholder="输入性别">
    </div>
</form>
<div class="k">
<!--    <input class="ipbt" type="button" value="增加" onclick="add()">-->
    <input class="ipbt" type="button" value="刷新" onclick="refresh()">
    <input class="ipbt" type="button" value="查询" onclick="quiery()">
<!--    <input class="ipbt"  type="button" value="确认修改" onclick="onupdate()">-->
</div>
<div>
    <input class="lo" type="button" value="显示学生的位置" onclick="local()">
</div>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>昵称</th>
        <th>班级</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody id="studentbod">

    </tbody>
</table>

</body>
</html>